<!-- 归还车辆车队审批页面 -->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">归还车辆审核</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<!--审核意见输入块-->
			<view class="space_15"></view>
			<view class="input_box"> 
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/r_shenhe.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>审核意见：
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="input_line1">
					<u-radio-group v-model="form_task_progress.status" placement="row" @change="showRemark()">
						<!-- <u-radio :customStyle="{marginLeft:'50px'}" v-for="(item, index) in radio_shenhe" 
						         :key="index" :label="item.name" :name="item.value" iconSize="16px" labelSize="16px"></u-radio> -->
						<u-radio :customStyle="{marginLeft:'50px'}" v-for="(item, index) in radio_shenhe"
						         :key="index" :label="item.name" :name="item.value" size="26"></u-radio>
					</u-radio-group>
				</view>
				<view class="space_1"></view>
			</view>
			<!--存在问题照片输入块-->
			<view class="input_box" v-if="isShowRemark">
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/r_wenti.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>存在问题照片
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="r_return_img"> <!--上传图片部分-->
					<view v-if="form_task_progress.accessEventAppendixList.length>0" class="img_box_small" style="position:relative;"
					      v-for="(item,index) in form_task_progress.accessEventAppendixList" :key="index">
						<image :src="item.url" class="img_small"></image>
						<image src="../../static/all/imgdel.png" style="position:absolute;top:5rpx;right:5rpx;width:50rpx;height:50rpx;" @click="delImg(item.remark)"></image>
					</view>
					<view class="img_box_small" @click="clickFile()">
						<image src="../../static/all/addimg.png" class="img_small"></image>
					</view>
					<view class="space_25"></view>
				</view>
				<view class="space_35"></view>
				<view class="input_label">存在问题描述</view>
				<view class="input_textarea"> 
					<uni-easyinput type="textarea" v-model="form_task_progress.remark" :styles="styles" :placeholderStyle="placeholderStyle"
					               placeholder="请输入问题描述"></uni-easyinput>
				</view>
				<view class="space_35"></view>
				<view class="input_label">是否释放车辆为空闲状态*</view>
				<view class="input_line1">
					<u-radio-group v-model="form_task_progress.releaseCar" placement="row">
						<!-- <u-radio :customStyle="{marginLeft:'50px'}" v-for="(item, index) in radio_releaseCar" 
						         :key="index" :label="item.name" :name="item.value" iconSize="16px" labelSize="16px"></u-radio> -->
						<u-radio :customStyle="{marginLeft:'50px'}" v-for="(item, index) in radio_releaseCar"
										 :key="index" :label="item.name" :name="item.value" size="26"></u-radio>
					</u-radio-group>
				</view>
				<view class="space_35"></view>
			</view>
			<view class="space_180"></view>
			<!--提交按钮行-->
			<view v-if="btn==1" class="form_btn" @click="form_task_progress_submit()">提<span style="padding:30rpx;"></span>交</view>
			<view v-if="btn==0" class="form_btn btn_notClick">提交中……</view>
			<view class="space_80"></view>
		</view>
	</view>
</template>

<script>
	import baseURL from '@/config.js';
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx", 
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				/***************************以下是还车审核相关变量****************************/
				accessTaskId: "", //用于接收页面传参（申请单任务id）
				
				form_task_progress: {
					accessTaskId: '', //任务id
					accessEventAppendixList: [], //附件（用于保存出现事故时保存照片）
					remark: '', //审核拒绝时需要填写原因
					status: '', //还车审核结论
					releaseCar: true, //是否释放车辆为空闲状态（默认为true）
				},
				//审核位置单选按钮数据
				radio_shenhe: [{name: '通过',value: "able", },{name: '存在问题',value:"reject", },],
				isShowRemark:false, //是否显示未通过原因项
				
				//释放车状态位置单选按钮数据
				radio_releaseCar: [{name: '是',value: true, },{name: '否',value:false, },],
				
				/***************************以上是还车审核相关变量****************************/
				//防重复提交
				btn: 1, //0：不可用  1：可用（默认可用）
				
				//在此之上补充变量
			}
		},
		watch: {},
		onLoad(option) {
			getApp().globalData.query_flag=0; //在子页面（提交成功后需要刷新父页面）中将刷新控制变量置为0
			
			if(JSON.stringify(option)!="{}"){
				this.accessTaskId=option.accessTaskId;
			}
			
			//加载文件上传参数
			this.initImgParam();
		},
		onShow() {},
		methods: {
			/******************************以下是通用方法*********************************/
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			/******************************以上是通用方法*********************************/
			/******************************以下是业务方法*********************************/
			//根据审核结论判断是否显示存在问题项
			showRemark(){
				if(this.form_task_progress.status=="able"){ //通过
					this.isShowRemark=false;
					//还要将图片集合与存在问题文本区初始化
					this.form_task_progress.accessEventAppendixList=[];
					this.form_task_progress.remark=""; //存在问题的描述初始化
				}
				if(this.form_task_progress.status=="reject"){ //存在问题
					this.isShowRemark=true;
				}
			},
			//以下是上传图片相关方法
			//初始化图片上传相关参数
			initImgParam(){
				this.action=baseURL + "/uploadImg/uploadFileNew";
				console.log("上传图片组件参数",this.action); 
			},
			async clickFile(){
				var that=this;
				var r=await utils.testIos();
				console.log("ios专属处理r==",r);
				//将事件插入了"任务队列"，必须等到执行栈执行完主线程才会去执行它指定的回调函数
				setTimeout(() => {
					//若成功返回e，则调起相册与相机
					if(r.data.status=="success"){ 
						uni.chooseImage({
							count: 1, //最多可以选择的图片张数，默认9
							//sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
							sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
							success(res) {
								console.log('选择图片完成', res)
								// 调用上传图片的接口
								that.uploadPhoto(res.tempFilePaths); 
							},
							fail(err) {
								console.log('选取文件失败', err);
							},
							complete() {
								console.log('选取文件结束');
							},
						})
					}
				});
					
			},
			uploadPhoto(tempFilePaths) { 
				uni.showLoading({
				  title: '上传中……'
				}); //显示“上传中”加载框
				var that=this;
				uni.uploadFile({
					url: this.action, //接口url
					headers: {
						'content-type': 'multipart/form-data',
					},
					filePath: tempFilePaths[0], // 要上传文件资源的路径
					name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
					},
					success(res) {
						console.log('上传成功', res);
						uni.hideLoading(); //关闭加载框
						var tArray=JSON.parse(res.data);
						console.log('上传成功解析返回值==',tArray);
						for(var i=0;i<tArray.length;i++){
							var obj={};
							obj.remark=tArray[i].filename; 
							obj.url=tArray[i].url; //取url
							obj.type="2"; //2：代表问题照片
							obj.status=""; //必须项，给个空串
							that.form_task_progress.accessEventAppendixList.push(obj);
						}
						console.log("上传图片后的form_task_progress==",that.form_task_progress);
					},
					fail(err) {
						console.log('上传文件失败', err);
					},
					complete() {
						console.log('上传文件结束');
					},
				})
			},
			//删除文件（比对文件名方式方式）
			delImg(filename) {
				var that=this;
				console.log("删除图片参数filename，type==",filename,type);
				uni.showModal({
					title: '提示',
					content: '确定要删除这个图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm) {
							var tA=that.form_task_progress.accessEventAppendixList;
							for(var i=0;i<tA.length;i++){
								if(tA[i].remark==filename){
									tA.splice(i, 1);
									break;
								}
							}
							console.log("执行删除图片后的form_task_progress.accessEventAppendixList==",that.form_task_progress.accessEventAppendixList);
						}
					}
				})
			},
			//以上是上传图片相关方法
			//主提交方法
			form_task_progress_submit(){
				var that=this;
				that.form_task_progress.accessTaskId=that.accessTaskId;
				if(that.form_task_progress.status==""){ //校验空值
					uni.showModal({
						title: '提示',
						content: '请选择审核意见！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form_task_progress.status=="reject"){ //存在问题
					// //照片不是必填项 
					// if(that.form_task_progress.accessEventAppendixList.length==0){
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '请上传存在问题的车况照片！',
					// 		showCancel:false,
					// 		success: function (res) {
					// 			if(res.confirm){} 
					// 		}
					// 	}); //uni.showModal结束
					// 	return;
					// }
					if(that.form_task_progress.remark==""){ //需填写存在的问题
						uni.showModal({
							title: '提示',
							content: '请填写存在的问题！',
							showCancel:false,
							success: function (res) {
								if(res.confirm){} 
							}
						}); //uni.showModal结束
						return;
					}
				}
				
				console.log("还车审核提交的参数==",that.form_task_progress);
				uni.showModal({
						title: '提示',
						content: '确定提交审核意见吗？',
						success: function(res) {
							if (res.confirm) {
								that.btn=0; //按钮置为不可用
								utils.closeCarEvent(that.form_task_progress).then(res => {
									console.log('还车审核接口的返回值==',res); 
									that.btn=1; //无论成功与否按钮均置为可用
									if(res.data.status=="success"){
										getApp().globalData.query_flag=1; //查询全局控制变量(避免列表页面重复查询2次)
										uni.showToast({
											title:'操作成功！',
											icon: 'success'
										});
										setTimeout(() => {
											//关闭当前页，刷新列表页面
											utils.pageBack();
										}, 1000); //显示toast 500毫秒之后执行
									}
									if(res.data.status=="error"){
										let msg=res.data.message;
										uni.navigateTo({
											url:'/pages/error/error?errorMsg='+msg 
										}) 
									}
								}).catch(error => {
									uni.navigateTo({
										url:'/pages/error/error?errorMsg='+error
									})
								})
							} 
							else {
								//执行取消后的操作
							}
						}
					})//uni.showModal结束
			},
			/******************************以上是业务方法**********************************/
			
			/*********************在此之上补充方法**********************/
		},
	}
</script>
<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/b_form.css';
@import '../../common/css/review.css';
</style>